<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑系统配置域' : '新增系统配置域'"
      :visible.sync="dialogVisible"
      width="450px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        :size="size"
        label-width="120px"
        :show-message="showMessage"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-form-item label="配置域编码" prop="code">
          <el-input
            v-model.trim="ruleForm.code"
            placeholder="请输入配置域编码"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="配置域名称" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            placeholder="请输入配置域名称"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="配置域类型" prop="type">
          <el-radio-group v-model="ruleForm.type">
            <el-radio
              v-for="(item, index) in typeList"
              :key="index"
              :label="Number(item.code)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.type === 1" label="跳转组件路径" prop="path">
          <el-input
            v-model.trim="ruleForm.path"
            placeholder="请输入跳转组件路径"
            type="text"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item v-if="ruleForm.type === 2" label="关联模板" prop="templateId">
          <el-select
            v-model="ruleForm.templateId"
            style="width: 100%;"
            clearable
            placeholder="请选择关联模板"
          >
            <el-option
              v-for="(item, index) in templateConfigList"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model.trim="ruleForm.sort"
            :min="0"
            placeholder="请输入排序"
            style="width: 100%;"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="配置域状态" prop="status">
          <el-radio-group v-model="ruleForm.status" :disabled="code === 'global'">
            <el-radio
              v-for="(item, index) in statusList"
              :key="index"
              :label="Number(item.code)"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model.trim="ruleForm.remarks"
            placeholder="请输入备注"
            :rows="4"
            type="textarea"
            show-word-limit
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
import { all } from '@/api/system/template-config'
export default {
  name: 'SysConfigDomainSave',
  mixins: [mixin],
  data() {
    return {
      statusList: [], // 配置域状态数组
      typeList: [], // 配置域类型数组
      templateConfigList: [], // 配置模板列表
      // 表单对象
      ruleForm: {
        status: 1,
        sort: 0,
        type: 2
      },
      code: '',
      // 表单校验
      rules: {
        code: [{ required: true, message: '请输入配置域编码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入配置域名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择配置域类型', trigger: 'blur' }],
        path: [{ required: true, message: '请输入跳转组件路径', trigger: 'blur' }],
        templateId: [{ required: true, message: '请选择关联模板', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        status: [{ required: true, message: '请选择配置域状态', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.statusList = await this.getDictInfo('dict_status')
    this.typeList = await this.getDictInfo('sys_config_domain_type')
    this.getAllTemplateConfig()
  },
  methods: {
    // 获取全部的模板配置
    getAllTemplateConfig() {
      all().then(res => {
        this.templateConfigList = res.data
      })
    },
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) {
        this.ruleForm = { ...this.ruleForm, ...rows }
        this.code = rows.code
      } else {
        this.ruleForm = { status: 1, sort: 0, type: 2 }
      }
    }
  }
}
</script>
